import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './segment-tab.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type ISegmentTabProps = T.IProps & T.ISegmentTabProps;
const typeList = [
  { value: 0, text: '卡券' },
  { value: 1, text: '宝箱' },
  { value: 2, text: '道具' },
];
@connect<Partial<ISegmentTabProps>, T.ISegmentTabStateProps>(store2Props, actions)
export default class SegmentTab extends Component<Partial<ISegmentTabProps>, T.ISegmentTabStateProps> {
  static options = {
    addGlobalClass: true,
  };
  constructor(props: ISegmentTabProps) {
    super(props);
  }

  render() {
    let {
      actions: {
        action: { changeSegment },
      },
      main: { segmentTab },
    } = this.props;
    console.log('segmentTab', segmentTab);
    return (
      <View className="SegmentTab">
        {typeList.map((item, index) => {
          return (
            <View
              key={index}
              className={item.value == segmentTab ? 'tab-text curr' : 'tab-text'}
              onClick={() => {
                // changeSegment(item.value);
              }}
            >
              {item.text}
            </View>
          );
        })}
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
